<template>
       <div style="border: 1px solid #ccc">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
          />
          <Editor
            style="height: 200px; overflow-y: hidden;"
           
            :defaultConfig="editorConfig"
            @onChange="onChange"
            @onCreated="handleCreated"
          />
        </div>
        <!-- <el-button @click="getHtml">获取内容</el-button> -->
</template>
<script setup lang="ts">
import { onBeforeUnmount, ref, shallowRef, onMounted, watch } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('<p>hello</p>')

// 模拟 ajax 异步获取内容
onMounted(() => {
   console.log(props.modelValue);
   
})

const editorConfig = { placeholder: '请输入内容...' }

let props = defineProps({
    modelValue: {type:String,default:''}
})
let emit = defineEmits(['update:modelValue'])

const onChange = (editor: any) => { 
    // console.log(editor.getText());
    // console.log(editor.children);
    emit('update:modelValue',editor.getHtml())
}



// const getHtml = () => { 
//     console.log(editorRef.value.getText());
    
// }


// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor:any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
    // editor.setHtml(props.modelValue)
}

watch(() => props.modelValue, (newValue: any, oldValue: any) => { 
    console.log("我感知到了。。");
    editorRef.value.setHtml(newValue)
})

</script>